<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>异常考勤</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        .ml{
            margin-left: 2px;
        }
    </style>
  <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui-v2.9.8/layui/css/layui.css">
    <script src="../layui-v2.9.8/layui/layui.js"></script>
    <style type="text/css">
        @media screen and (max-width: 767px) {
            .layui-row{
                display: flex!important;
                flex-direction: column;
            }
            .layui-field-title {
                margin: 5px 0 !important;
            }
            .layui-field-title legend {
                font-size: 0.8rem !important;
            }
            .layui-form .layui-col-xs1 div{
                font-size: 0.9rem!important;
            }
            .layui-form .layui-col-xs1,.layui-form .layui-col-xs12 p{
                width: 20% !important;
                min-width: 70px;
                text-align: left !important;
                margin: 10px 0 0 5px;
                height: 19px !important;
                line-height: 19px !important;
            }
            .layui-form .layui-col-xs5,#copyPersonSelect{
                width: 80% !important;
                font-size: 0.7rem;
            }
            .layui-col-xs6 div button{
                height: 25px!important;
                line-height: 25px!important;
                padding: 0 10px!important;
                font-size: 0.8rem!important;
            }
            .layui-col-xs6 div{
                margin-left: 30px!important;
                margin-top: 0!important;
            }
            /*时间选择器*/
            .layui-laydate{
                width: 90%;
                max-width: 272px;
                min-width: 169px;
                font-size: 0.6rem!important;
            }
            .layui-laydate-main{
                width: 100%;
                max-width: 272px;
            }
            .layui-laydate-header i{
                padding: 0 !important;
                font-size: 0.6rem!important;
            }
            .layui-laydate-header{
                padding: 10px 45px 5px;
                line-height: 15px
            }
            .layui-laydate-header .laydate-set-ym span{
                padding: 1px!important;
            }
            .layui-laydate-header i.laydate-prev-y {
                left: 5px;
            }
            .layui-laydate-header i.laydate-prev-m {
                left: 25px;
            }
            .layui-laydate-header i.laydate-next-y {
                right: 5px;
            }
            .layui-laydate-header i.laydate-next-m {
                right: 25px;
            }
            .layui-laydate-footer{
                height: 30px!important;
                line-height: 15px!important;
                padding: 3px!important;
            }
            .layui-laydate-footer span{
                line-height: 20px;
                height: 20px;
                padding: 0 3px!important;
                font-size: 0.7rem!important;
            }
            .layui-laydate-footer .laydate-footer-btns{
                top: 3px!important;
            }
             /*    */
            .layui-col-xs2,.layui-col-xs2 ml{
                width: 80% !important;
                padding-bottom: 5px;
            }

        }
    </style>
    <script>
        function deleteprocess() {
            // 创建表单数据对象
            var formData = new FormData();
            formData.append("id", layui.$("#formid").val());
            // 使用sendBeacon方法发送异步请求
            navigator.sendBeacon("/process/delete", formData);
        }
        layui.use(['dropdown', 'util', 'layer'], function() {
            var  $=layui.$;
            var form = layui.form;
            window.addEventListener("beforeunload",deleteprocess);
            var laydate = layui.laydate;
            // 渲染
            laydate.render({
                elem: '#firstExceptionDate',
                format: 'yyyy-MM-dd', // 设定日期显示格式
                type: 'date' // 只显示日期，不显示时间
            });
            laydate.render({
                elem: '#secondExceptionDate',
                format: 'yyyy-MM-dd', // 设定日期显示格式
                type: 'date' // 只显示日期，不显示时间
            });
            laydate.render({
                elem: '#thirdExceptionDate',
                format: 'yyyy-MM-dd', // 设定日期显示格式
                type: 'date' // 只显示日期，不显示时间
            });
            laydate.render({
                elem: '#fourthExceptionDate',
                format: 'yyyy-MM-dd', // 设定日期显示格式
                type: 'date' // 只显示日期，不显示时间
            });
            laydate.render({
                elem: '#fifthExceptionDate',
                format: 'yyyy-MM-dd', // 设定日期显示格式
                type: 'date' // 只显示日期，不显示时间
            });
            form.on('submit(submitForm)', function(data){
                layer.load(2, {shade: [0.5,'#000']});
                window.removeEventListener("beforeunload",deleteprocess);
                // 手动触发表单的提交
                return true; // 返回 true 表示继续提交表单，返回 false 表示取消提交
            });
            //自定义验证规则
            form.verify({
                fileExt: function(value, item){ // value为文件路径，item为当前输入框的DOM对象
                    var allowedExtensions = ['jpg', 'png','jpeg']; // 允许的文件后缀
                    if(value){
                        var extension = value.split('.').pop().toLowerCase(); // 获取文件后缀并转为小写
                        if(allowedExtensions.indexOf(extension) === -1){
                            return '不支持该文件类型，请选择 ' + allowedExtensions.join(', ') + ' 格式的文件';
                        }
                    }
                }

            });
        });
    </script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>异常考勤</legend>
</fieldset>
<div>
<form class="layui-form" action="/process/attendanceadd" enctype="multipart/form-data" method="post">
    <div style="display: none"><input type="text"name="id"id="formid" th:value="${id}"></div>
    <div class="layui-row">
      <div class="layui-col-xs1" style="text-align: center;height: 100px;font-size: 16px;line-height: 100px">
        <div>考勤说明说明</div>
      </div>
      <div class="layui-col-xs11">
        <textarea name="" class="layui-textarea"readonly="readonly" style="height: 150px">
            员工考勤、请假管理制度

员工考勤、请假管理制度
第一章    考勤与请假
一、作息时间
工作时间: 周一至周五早8：30—晚17：30
二、休息日
周六和周日及国家规定法定节假日
三、考勤与请假规定
1、员工考勤，统一实行上、下班打卡制度。
2、员工必须亲自打卡，严禁代人打卡，代人打卡者取消当日工资。
3、员工因生病不能上班，应在当时（当日）电话告之直属领导，事后出具诊断书和医院收费记录，以诊断书病休期为病假期，否则视为事假。病假超过1天以上需要和部门老总报备，出示病历和缴费凭证病假工资发放70%。长期病假公司有权解除劳动关系。
4、事(病)假必须在休假后第一天向人事索要请假条并让部门经理签字上交人事《请假条》交请假条时间最长不能超过三天否则按旷工处理。工作日员工事假由本部门经理批准，以不耽误工作为原则。超过一天以上的事假需要提前和部门经理请假后，必须让部门老总签字后交给人事部门.事假0.5天只扣除0.5天工资；事假一天以上（包括1天）扣除当日工资外，另扣除满勤奖200元。
5、节假日及临时加班加点工作时（须经上级领导签字批准）要求员工正常打卡。
6、迟到、早退处罚规定(8:31分为考勤迟到,8:30分不为考勤迟到)
开始后30分钟内上班者为迟到1次；超过30分钟视为请事假，按每2小时计算，以此类推。迟到1次，非销岗位一般员工扣款20元；公司管理干部以上职务扣款50元，销售岗位一般员工扣款20元，主管（助理）、经理及以上职务，扣款50元。
7、加班：非销人员由于业务需要超出工作时间1小时以上视为加班，按照串休处理，计提方法：月工资/当月天数/8小时*时长。由部门经理进行严格把控并上报总经理审批《加班申请单》方可执行。没有审批属于自愿加班。
8、婚嫁:婚嫁休息日期3天,因婚嫁请假最长不能超过7天.
9、丧假:直系3天.
10、旷工: 上下班不打卡者,没有上交请假条或考勤异常表者一律按照旷工进行处理,旷工需扣除每月满勤奖励200元同时扣除旷工日工资并记录在人事部,旷工三次以上公司有权利进行辞退.一个月内连续旷工3天或一个月累计旷工满5天者，视为自动离职；各部门经理对自动离职人员要求在其离职当日上报人事部备查。
11、离职:离职本人需要提前一个月告知部门老总和人事部门,管理职离任需要提前两个月通知上级领导并告知人事部门,试用期员工和实习生实习期需要提前一周填写离职申请表,方可离职.不提前告知者,说走就走的员工公司有权利停发工资.办理离职员工请本人提交”离职申请单”上交给人事部门,不允许部门经理帮忙办理离职,否则罚款1000元.被考核掉的员工正常办理离职手续正常开工资.
12、忘打卡刷脸者请第二天到人事部填写忘打卡纪录单,找部门经理签字后上交人事部门,无忘打卡记录单者一律按照旷工处理.
13、因工作需要外出办事者请填写<<外出办事记录单>>
        </textarea>
      </div>
        <div class="layui-col-xs12"style="text-align: center;height: 38px;font-size: 16px;line-height: 38px">
        </div>
      <div class="layui-col-xs1"style="text-align: center;height: 38px;font-size: 16px;line-height: 38px">
        <div>申请人</div>
      </div>
      <div class="layui-col-xs5 headfont">
          <input th:value="${userDetails.realName}" name="realName" type="text" class="layui-input" readonly="readonly" >
      </div>
        <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
            <div >审核人</div>
        </div>
        <div class="layui-col-xs5">
            <select id="auditingperson" name="auditingPerson" lay-verify="required">
                <option value=""></option>
                <option th:each="BaseUser : ${lb}"th:value="${BaseUser.username}" th:text="${BaseUser.realName}"></option>
            </select>
        </div>

        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
        <div class="layui-col-xs1" style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
            <div>异常日期</div>
        </div>
        <div class="layui-col-xs2" >
            <input type="text" class="layui-input"name="firstExceptionDate"lay-verify="required"id="firstExceptionDate"   autocomplete="off">
        </div>
        <div class="layui-col-xs2 ml" >
            <input type="text" class="layui-input"name="secondExceptionDate"id="secondExceptionDate"   autocomplete="off">
        </div>
        <div class="layui-col-xs2 ml" >
            <input type="text" class="layui-input"name="thirdExceptionDate"id="thirdExceptionDate"   autocomplete="off">
        </div>
        <div class="layui-col-xs2 ml" >
            <input type="text" class="layui-input"name="fourthExceptionDate"id="fourthExceptionDate"   autocomplete="off">
        </div>
        <div class="layui-col-xs2 ml" >
            <input type="text" class="layui-input"name="fifthExceptionDate"id="fifthExceptionDate"  autocomplete="off">
        </div>
        <div class="layui-col-xs1" >
        </div>
        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
        <div class="layui-col-xs1"style="text-align: center;height: 38px;font-size: 16px;line-height: 38px;">
            <div>备注</div>
        </div>
        <div class="layui-col-xs5">
            <textarea name="remarks"  class="layui-textarea"lay-verify="maxSize" placeholder="字数小于200"></textarea>
        </div>
        <div class="layui-col-xs12"style="text-align: center;height: 10px;">
        </div>
        <div class="layui-col-xs6"style="height: 200px;">
            <div style="display: flex;margin-left: 100px;margin-top: 150px">
                <button class="layui-btn"lay-filter="submitForm" lay-submit id="submit" >保存</button>
                <!--                <button class="layui-btn" id="reset">取消</button>-->
            </div>
        </div>
    </div>
</form>
</div>

</body>
</html>